@import '../../common/scss/base.scss';
page{
  background-color: $theme-color;
  padding-bottom:100rpx;
  .body {
    position: relative;
    .look-detail{
      position:absolute;
      right:0;
      top:78rpx;
      background-color:#E0BF74;
      font-size:24rpx;
      width:152rpx;
      height:36rpx;
      border-top-left-radius:26rpx;
      border-bottom-left-radius:26rpx;
      padding-left:22rpx;
      box-sizing:border-box;  
      display:flex;
      align-items:center; 
      line-height:36rpx;    
      image{
        width: 10rpx;
        height: 20rpx;
        margin-left: 10rpx;
      }
    }
  }
  
  .center-top{
    height: 552rpx;
    padding-top: 74rpx;
    box-sizing:border-box;
    background: linear-gradient(139deg,rgba(0,0,0,1) 0%,rgba(64,62,56,1) 100%);
    font-family:PingFangSC-Medium;
    .center-text{
      font-size: 26rpx;
      color: #888888;
      text-align: center;
    }
    .center-money{
      color: #E0BF74;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 140rpx;
      view {
        &:first-child{
          font-size: 50rpx;
        }
        &:last-child{
          font-size: 100rpx;
        }
      }
    }
    .center-rule{
      text-align: center;
      margin-bottom: 38rpx;
      text {
        font-size: 22rpx;
        &:first-child{
          color: #888888;
        }
        &:last-child{
          color: #BFBFBF;
          text-decoration:underline
        }
      }
    }
    .center-button{
      width: 332rpx;
      height: 84rpx;
      text-align: center;
      line-height: 84rpx;
      font-size: 32rpx;
      border-radius: 42rpx;
      font-weight: 600;
      background: #E0BF74;
      margin: 0 210rpx;
    }
  }
  .show-center{
    position: relative;
    padding: 0 26rpx;
    .show-center-money{
      position: absolute;
      top:-50rpx;
      width: 700rpx;
      height: 152rpx;
      border-radius: 20rpx;
      padding: 24rpx 0 26rpx;
      background-color: #ffffff;
      box-shadow:0rpx 4rpx 18rpx 0rpx rgba(0,0,0,0.07);
      box-sizing: border-box;
      display:flex;
      text-align:center;
      .center-one{
        width: 232rpx;
        height: 100%;
      }
      .center-two{
        width: 232rpx;
        height: 100%;
        border-left: 1rpx solid #E8E8E8;
        border-right: 1rpx solid #E8E8E8;
      }
      .center-three{
        width: 230rpx;
        height: 100%;
      }
      .center-text{
        font-size: 24rpx;
        color: #7C7C7C;
        margin-bottom: 10rpx;
      }
      .content-num{
        font-size: 38rpx;
      }
    }
  }
  .center-serve{
    width: 690rpx;
    height: 556rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 128rpx 30rpx 0;
    .serve-title{
      font-size: 30rpx;
      padding: 30rpx 30rpx 24rpx;
      border-bottom:1rpx solid #eeeeee;
    }
    .serve-content{
      display: flex;
      flex-wrap: wrap;
      .serve-list{
        width: 230rpx;
        height: 230rpx;
        text-align: center;
        border-bottom: 1rpx solid #eeeeee;
        padding-top:58rpx;
        box-sizing:border-box;
        image{
          width: 88rpx;
          height: 88rpx;
        }
        view {
          color: #353535;
          font-size: 26rpx;
        }
        &:nth-child(2){
          border-left: 1rpx solid #eeeeee;
          border-right: 1rpx solid #eeeeee;
        }
        &:nth-child(4){
          border-bottom: none;
        }
        &:nth-child(5){
          border-left: 1rpx solid #eeeeee;
          border-right: 1rpx solid #eeeeee;
          border-bottom: none;
        }
        &:nth-child(6){
          border-bottom: none;
        }
      }
    }
  }
}
// 原版
// page{
//   background-color: $theme-color;
//   .fix-iphonex{
//     height: 68rpx;
//   }
//   .center-top{
//     width: 100%;
//     background:linear-gradient(139deg,rgba(0,0,0,1) 0%,rgba(64,62,56,1) 100%);
//     position: relative;
//     height: 618rpx;
//     padding:76rpx 0 32rpx;
//     box-sizing: border-box;
//     .top-icon{
//       width: 36rpx;
//       height: 36rpx;
//       position: absolute;
//       top: 40rpx;
//       right: 30rpx;
//     }
//     .center-text{
//       font-size:24rpx;
//       font-family:PingFangSC-Regular;
//       font-weight:400;
//       color:rgb(136,136,136);
//       line-height:34rpx;
//     }
//     .center-money{
//       margin-top: 32rpx;
//       view{
//         color:rgba(224,191,116,1);
//         display: inline-block;
//         font-size: 50rpx;
//         &:nth-child(2){
//           font-size:100rpx;
//           font-family:PingFangSC-Medium;
//           font-weight:500;
//           line-height:130rpx;
//           letter-spacing: 5rpx;
//         }
//       }
//     }
//     .look-detail{
//       line-height:34rpx;
//       display:flex;
//       justify-content:center;
//       align-items:center;
//       text{
//         font-size: 24rpx;
//         color: #888888;
//         margin-right: 8rpx;
//       }
//       image{
//         width: 10rpx;
//         height: 20rpx;
//       }
//     }
//     .center-button{
//       width:332rpx;
//       line-height:84rpx;
//       border-radius:42rpx;
//       font-size:32rpx;
//       font-family:PingFangSC-Regular;
//       font-weight:600;
//       color:#000000;
//       margin:46rpx 208rpx 32rpx 210rpx;
//       background-color:#e0bf74;
      
//     }
//     .center-success{
//       padding: 16rpx 40rpx 52rpx;
//       display: flex;
//       align-items: center;
//       justify-content:space-between;
//       .center-success-list{
//         width: 186rpx;
//         text-align: center;
//         view{
//           font-family:PingFangSC-Regular;
//           font-weight:400;
//           &:nth-child(1){
//             font-size:24rpx;
//             color:rgba(136,136,136,1);
//             line-height:34rpx;
//           }
//           &:nth-child(2){
//             font-size:40rpx;
//             color:rgba(255,255,255,1);
//             line-height:56rpx;
//             margin-top: 18rpx;
//           }
//         }
//       }
//     }
//   }
//   .center-list{
//     .my-commission{
//       background-color: #ffffff;
//       margin-bottom: 22rpx;
//       padding: 0 30rpx;
//       .extract{
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         padding:40rpx 0;
//         border-bottom:1rpx solid #EDEDED;
//         &:last-child{
//           border-bottom:1rpx solid transparent;
//         }
//         .extract-text{
//           font-size:30rpx;
//           font-family:PingFangSC-Regular;
//           font-weight:400;
//           color:rgba(53,53,53,1);
//           line-height:42rpx;
//         }
//         .extract-icon{
//           display:flex;
//           align-items:center;
//           .red-toast{
//             width: 16rpx;
//             height: 16rpx;
//             border-radius: 50%;
//             background-color: #D0021B;
//             margin-left: 16rpx;
//           }
//           view{
//             font-size:28rpx;
//             font-family:PingFangSC-Regular;
//             font-weight:400;
//             color:rgba(178,178,178,1);
//             line-height:40rpx;
//             display:flex;
//             align-items:center;
//           }
//           image{
//             width: 16rpx;
//             height: 30rpx;
//             margin-left: 20rpx
//           }
//         }
//       }
//     }
//   }
// }